<template>
  <PageWrapper contentBackground @back="goBack">
    <div class="pt-4 ml-6">
      <a-tabs default-active-key="basicPane" v-model:activeKey="currentKey">
        <a-tab-pane key="basicPane" tab="基本信息"><basicSetting ref="basicSettingRef" :id="id" /></a-tab-pane>
        <a-tab-pane key="columnPane" tab="字段配置"><columnSetting ref="columnSettingRef" :id="id" /></a-tab-pane>
        <a-tab-pane key="formPane" tab="表单设置"><formSetting ref="formSettingRef" :id="id" /></a-tab-pane>
        <a-tab-pane key="searchPane" tab="搜索面板"><searchSetting ref="searchSettingRef" :id="id" /></a-tab-pane>
        <a-tab-pane key="tablePane" tab="数据列表"><listSetting ref="listSettingRef" :id="id" /></a-tab-pane>
        <a-tab-pane key="menuPane" tab="菜单设置"><menuSetting ref="menuSettingRef" :id="id" /></a-tab-pane>
      </a-tabs>
    </div>
    <div class="flex justify-center m-5">
      <a-button type="warning">取消</a-button>
      <a-button type="primary" class="ml-5" @click="saveSettings">保存</a-button>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '@/components/Page';
  import { useGo } from '@/hooks/web/usePage';
  import { useTabs } from '@/hooks/web/useTabs';
  import { Tabs as ATabs, TabPane as ATabPane } from 'ant-design-vue';

  import basicSetting from './tabs/basicSetting.vue';
  import columnSetting from './tabs/columnSetting.vue';
  import formSetting from './tabs/formSetting.vue';
  import listSetting from './tabs/listSetting.vue';
  import searchSetting from './tabs/searchSetting.vue';
  import menuSetting from './tabs/menuSetting.vue';

  import { detail, TableDO } from '@/api/toolkit/table';

  defineOptions({ name: 'ServerSettings' });

  const tableInfo = ref<TableDO>({});

  const go = useGo();

  // 路由中携带的参数
  const route = useRoute();
  const id = ref<any>(route.params?.id);
  const currentKey = ref('basicPane');

  // 基本信息
  const basicSettingRef = ref<any>({});
  const columnSettingRef = ref<any>({});
  const formSettingRef = ref<any>({});
  const listSettingRef = ref<any>({});
  const searchSettingRef = ref<any>({});
  const menuSettingRef = ref<any>({});

  detail(id.value).then((res) => {
    tableInfo.value = res;
    // 设置Tab的标题
    setTitle(tableInfo.value.tableName + '配置');
  });

  // 动态修改 Tab 标题
  const { setTitle } = useTabs();

  // 页面左侧点击返回链接时的操作
  function goBack() {
    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
    go('/developer/server/java');
  }

  function saveSettings() {
    const basicSetting = basicSettingRef.value.validate();
    const columnSetting = columnSettingRef.value.validate();
    const formSetting = formSettingRef.value.validate();
    const listSetting = listSettingRef.value.validate();
    const searchSetting = searchSettingRef.value.validate();
    const menuSetting = menuSettingRef.value.validate();

    console.log('basicSettings:', basicSetting);
    console.log('columnSetting:', columnSetting);
    console.log('basicSettings:', formSetting);
    console.log('searchSetting:', searchSetting);
    console.log('listSetting:', listSetting);
    console.log('menuSetting:', menuSetting);
  }
</script>
